<template>

    <div class="back">
      <!--导航栏-->
      <div class="a2">
        <div class="a7">
          <div class="a3">
            <div class="a4"><img src="../../assets/a1.png" height="30" width="110" class="aa"/></div>
            <div class="a5">
              <button class="a5a">
                <router-link :to="'Home'">首页</router-link>
              </button>
              <button class="a5a">
                <router-link :to="'MyActive'">我的活动</router-link>
              </button>
              <button class="a5a">
                <router-link :to="'MyTribe'">我的部落</router-link>
              </button>
              <button class="a5a">
                <router-link :to="'MyInfo'">个人信息</router-link>
              </button>
              <button class="a5a">
                <router-link :to="'SecondClass'">第二课堂成绩单</router-link>
              </button>
              <button class="a5a">APP下载</button>
            </div>
            <div class="a6">
              <div style="width: 300px"></div>
              <div class="a6a"></div>
              <div class="a6a"></div>
              <div class="a6aa"></div>
            </div>
          </div>
        </div>
      </div>


<div class="g1">
  <div class="g5">
  <div class="g2">
    <div class="g3"> <button class="g6" @click="getNewsList(1,2)">资讯</button></div>
    <div class="g8"> <button class="g6" @click="getNewsList(1,1)">公告</button></div>
  </div>
  <div class="g4">
    <div style="margin-top: 27px;">
    <div  v-for="n in newsList">
      <div class="b6" @click="toDetail(n)">
        <div>{{n.name}}</div>
        <div>[{{n.date}}]</div>
      </div>
      <div class="b7"></div>
    </div>
      <el-pagination
        background="true"
        class="bbb7"
        @size-change="handleSizeChange"
        @current-change="getNewsList"
        :current-page="page.number+1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="page.size"
        layout=" prev, pager, next, jumper"
        :total="page.totalElements">
      </el-pagination>
    </div>

  </div>
  </div>
</div>

      <!--页尾-->
      <div class="c1">
        <div class="c2">
          <div class="c3">
            <div>到梦简介</div>
            <div>到梦协议</div>
            <div>到梦服务</div>
            <div>第二课堂全国活动查询</div>
            <div>第二课堂全国活动证书查询</div>
            <div>校企共建</div>
            <div>问题与帮助</div>
            <div>联系我们</div>
            <div>APP使用说明</div>
            <div>盗梦空间使用章程和制度</div>
          </div>
          <div class="c4"></div>
          <div class="c5">
            <div>京公网安备11010802024175 到梦空间系统</div>
            <div>2016-2021 Copyright©全国共青团研究中心</div>
          </div>
        </div>
      </div>
    </div>

</template>

<script>
    export default {
        name: "AllNews",
     data(){
          return{
            newsList:[],
            newsList1:[],
            newsList2:[],
            page:{},
            pageSize:20,
            name:'',
            date:'',
            content:'',

          }
     },
      methods:{
        handleSizeChange(pageSize){
          this.pageSize = pageSize
          this.getNewsList(1,2)
        },
            getNewsList(curPage,sid){
              this.$axios.get('/news/findBySid?curPage='+curPage+'&pageSize='+this.pageSize+'&sid='+sid).then(resp=>{
                console.log(resp.data);
                this.page=resp.data
                this.newsList=resp.data.content
              })
            },
        toDetail(n){
          window.sessionStorage.setItem("news_name",n.name);
          window.sessionStorage.setItem("news_date",n.date);
          window.sessionStorage.setItem("news_content",n.content);
          this.$router.push('/NewsDetail')
        },
        getNewsList1(){
          this.$axios.get('/news/findBySid1').then(resp=>{
            this.newsList1=resp.data
          })
        },
        getNewsList2(){
          this.$axios.get('/news/findBySid2').then(resp=>{
            this.newsList2=resp.data
          })
        },

      },
      created() {
          this.getNewsList(1,2)
        this.getNewsList1()
        this.getNewsList2()
      }
    }
</script>

<style scoped>
  a{
    color: black;
    text-decoration: none;
  }
  button{
    border: none;
    background-color: transparent;
    box-shadow: none;
  }
  .a2{
    position: relative;
  }
  .a7{
    width: 100%;
    height: 60px;
    position: fixed;
    z-index: 2;
    background:#FFFFFF ;
    box-shadow: 0px 5px 10px 0 #E2E2E2;
  }
  .a3{
    display: flex;
    width: 1210px;
    height: 50px;
    margin: auto;
  }
  .a4{
    width: 100px;
    height: 55px;
    display: grid;
    align-items: center;
    cursor: pointer;
  }
  .a5{
    flex: 1;
    font-size: 13px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .a5a>a:hover{
    cursor: pointer;
    color: gold;
  }
  .a5a:hover{
    cursor: pointer;
    color: gold;
  }

  .a6{
    font-size: 13px;
    width: 500px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .a6a:hover{
    cursor: pointer;
  }
  .a6aa:hover{
    cursor: pointer;
    color: darkgray;
  }
  .back{
    background-color: #F4F4F4;
    height: 1000px;
  }
  .bbb7{
    text-align: center;
    margin-top: 50px;
    padding-bottom: 20px;
  }
  .c1{
    background: #D6D8DA;
    margin-top: 1000px;
    width: 100%;
    height: 100px;
    position: absolute;
  }
  .c2{
    width: 1210px;
    margin: auto;
  }
  .c3{
    height: 40px;
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    align-items: center;
    color: black;
    cursor: pointer;
  }
  .c4{
    border-bottom: 1px solid darkgray;
    margin-top: 10px;
  }
  .c5{
    width: 700px;
    margin: auto;
    margin-top: 20px;
    display: flex;
    font-size: 13px;
    justify-content: space-evenly;
    color: black;
  }

  .g1{
    width: 100%;
    margin-top: 80px;
    position: absolute;
  }
  .g5{
    width: 1210px;
    margin: auto;
    display: flex;
    justify-content: space-between;
  }
  .g2{
    width: 250px;
    height: 170px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .g3{
    font-size: 13px;
    height: 75px;
    display: flex;
    align-items: flex-end;
  }
  .g8{
    font-size: 13px;
    height: 75px;
  }
  .g6{
    height: 40px;
    width: 250px;
    padding-left: 25px;
    display: flex;
    align-items: center;
  }
  .g6:hover{
    background: #F4F4F4;
    border-left: 1px solid orange;
    cursor: pointer;
  }
  .g6:focus{
    background: #F4F4F4;
    border-left: 1px solid orange;
    color: orange;
  }
  .g4{
    background: #FFFFFF;
    width: 940px;
  }
  .b6{
    margin-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: black;
    height: 40px;
    cursor: pointer;
  }
  .b6:hover{
    color: orange;
  }

  .b7{
    border: 1px solid #F2F2F2;
    margin: auto;
    width: 900px;
  }
</style>
